<template>
  <div class="uset-table"
    v-loading="loading"
    element-loading-text="加载中"
    element-loading-spinner="el-icon-loading"
  >
    <h2>用户信息</h2>
    <el-row>
      <el-col :span="4">
        <el-input
          v-model="search"
          type="text"
          placeholder="请输入姓名搜索" />
      </el-col>
      <el-col :offset="1" :span="16">
        <el-button @click="resetDateFilter">清除日期过滤器</el-button>
        <el-button @click="clearFilter">清除所有过滤器</el-button>
      </el-col>
    </el-row>
    <!-- :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase())).slice((currentPage-1) * pageSize, currentPage * pageSize)" -->
    <el-table ref="filterTable"
      :data="filterAndPageing"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        sortable
        width="180"
        column-key="date"
        :filters="[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]"
        :filter-method="filterHandler"
      ></el-table-column>
      <el-table-column
        sortable
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址"
        :formatter="formatter">
      </el-table-column>
      <el-table-column
        prop="tag"
        label="标签"
        width="100"
        :filters="[{ text: '家', value: '家' }, { text: '公司', value: '公司' }, { text: '学校', value: '学校'}]"
        :filter-method="filterTag"
        filter-placement="bottom-end"
      >
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.tag === '家' ? 'primary' : ((scope.row.tag === '公司') ? 'success' :  'info')"
            disable-transitions
          >{{scope.row.tag}}</el-tag>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="tableData.length"
      @current-change="pageChange">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data () {
    return {
      loading: true,
      pageSize: 12,  // 分页每一页的大小
      currentPage: 1, // 当前页
      search: '',
      tableData: []
    }
  },
  created () {
    this.loading = true
    setTimeout(() => {
      this.$http('/mymenu/user-info').then(res => {
        this.tableData = res.data
        this.loading = false
      })
    }, Math.random() * 2000)
  },
  methods: {
    resetDateFilter () {
      this.$refs.filterTable.clearFilter("date")
    },
    clearFilter () {
      this.$refs.filterTable.clearFilter()
    },
    formatter (row, column) {
      return row.address
    },
    filterTag (value, row) {
      return row.tag === value
    },
    filterHandler (value, row, column) {
      const property = column["property"]
      return row[property] === value
    },
    pageChange (currentPage) {
      this.currentPage = currentPage
    }
  },
  computed: {
    filterAndPageing () {
      let filterData = this.tableData.filter(data => !this.search || data.name.toLowerCase().includes(this.search.toLowerCase()))
      if (this.search) {  // 在搜索的时候就不进行分页了,全部搜索到的都显示出来
        return filterData
      } else {
        return filterData.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
h2 {
  text-align: center;
}
</style>
